<template>
  <div class="home">
    <div class="swiper" :style="{height: scrollerHeight}">
      <swiper ref="mySwiper" :options="swiperOptions">
        <swiper-slide>
          <ul class="swiperul">
            <li class="swiperli swiperli1"></li>
          </ul>
        </swiper-slide>
        <swiper-slide>
          <ul class="swiperul">
            <li class="swiperli swiperli2"></li>
          </ul>
        </swiper-slide>
        <swiper-slide>
          <ul class="swiperul">
            <li class="swiperli swiperli3"></li>
          </ul>
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
      <!-- 左右箭头 -->
      <div class="swiper-button-prev" slot="button-prev"></div>
      <div class="swiper-button-next" slot="button-next"></div>
    </div>
  </div>
</template>

<script>
import { Swiper, SwiperSlide } from "vue-awesome-swiper";
import "swiper/css/swiper.css";
// @ is an alias to /src
export default {
  name: "Home",
  data() {
    return {
      swiperOptions: {
        autoplay: {
          disableOnInteraction: false, //用户操作后是否禁止自动循环
          delay: 3000 //自自动循环时间
        }, //可选选项，自动滑动
        speed: 1500, //切换速度，即slider自动滑动开始到结束的时间（单位ms）
        loop: true, //循环切换
        autoHeight: true,
        scrollbarHide: true,
        navigation: {
          prevEl: ".swiper-button-prev",
          nextEl: ".swiper-button-next"
        },
        pagination: {
          el: ".swiper-pagination"
        }
        // Some Swiper option/callback...
      }
    };
  },
  computed: {
    // 滚动区高度
    // (业务需求：手机屏幕高度减去头部标题和底部tabbar的高度，当然这2个高度也是可以动态获取的)
    scrollerHeight: function() {
      return this.common.scrollerHeight();
    }
  },
  methods: {
    destroyed() {
      window.removeEventListener("resize", this.getHeight);
    }
  },
  components: {
    Swiper,
    SwiperSlide
  },
  created() {
  }
};
</script>
<style lang="stylus">
.home {
  overflow: hidden;
}
.swiper-button-prev,.swiper-button-next {
  background-size: 55px 55px !important;
  color:'red' !important;
  width: 55px;
  height: 55px;
  top:242px;
  margin-top:0px;
  outline:none;
}
.swiper-button-prev {
  background: url(http://static.monlot.com/images/left.png);
  left:120px;
}
.swiper-button-next {
  background: url(http://static.monlot.com/images/right.png);
  right:120px;
}

.swiper-button-prev::after,.swiper-button-next::after {
  content:'' !important;
}
// 
.swiper {
  position: relative;
}

.swiper-container-autoheight {
  height: 100%;
}

.swiperul {
  // position: relative;
  height: 100%;
}

.swiperli {
  height: 100%;
  width: 100%;
}

.swiperli1 {
  background: url('~img/home/banner1.jpg') center top / 100% no-repeat; // upload.monlot.com/2018/09/08/5ee5e80e.jpg) center top / 100% no-repeat;
}

.swiperli2 {
  background: url('~img/home/banner2.jpg') center top / 100% no-repeat; // upload.monlot.com/2018/09/08/5ee5e80e.jpg) center top / 100% no-repeat;
}

.swiperli3 {
  background: url('~img/home/banner3.jpg') center top / 100% no-repeat;
}

.swiper-container-autoheight .swiper-slide {
  height: 100%;
}
</style>
